<template>
  <Title>
    <template v-slot:center>分类</template>
  </Title>
  <div id="box">
    <div class="order-tab">
      <van-tabs v-model="active" @click="tabClick">
        <van-tab title="销量排序"></van-tab>
        <van-tab title="价格排序"></van-tab>
        <van-tab title="评论排序"></van-tab>
      </van-tabs>
    </div>

      <van-sidebar class="left-menu" v-model="activeKey">
        <van-collapse v-model="activeName" accordion>
          <van-collapse-item v-for="(item,index) in categories" :key="index"
                             :title="item.name" :name="item.name">
            <van-sidebar-item v-for="sub in item.children" :key="sub.id"
                              :title="sub.name" @click="getGoods(sub.id)">
            </van-sidebar-item>
          </van-collapse-item>
        </van-collapse>
      </van-sidebar>


    <div class="goods-list">
      <div class="content">
        <van-card v-for="item in showGoods" :key="item.id"
                  :num="item.comments_count"
                  :tag="item.comments_count>=0?'流行':'标签'"
                  :price="item.price"
                  :desc="item.updated_at"
                  :title="item.title"
                  :thumb="item.cover_url"
                  :lazy-load="true" @click="itemClick(item.id)"/>
      </div>
    </div>
    <BackTop v-show="isShowBackTop" @backTop="backTop"></BackTop>
  </div>
</template>

<script>
import Title from "@/components/common/title/Title";
import {getCategory,getCategoryGoods} from "../../network/category";
import {computed, nextTick, onMounted, reactive, ref, watchEffect} from "vue";
import BScroll from "better-scroll";
import BackTop from "../../components/common/BackTop";
import {useRouter} from 'vue-router'


export default {
  name: "Category",
  components: {Title,BackTop},
  setup() {
    const router=useRouter()
    let activeKey = ref(0);
    let categories = ref([]);
    let activeName = ref(1);
    let active=ref(1);
    //当前的排序条件
    let currentOrder=ref('sales')
    //当前的分类id
    let currentCid=ref(0)
    //数据模型
    const goods=reactive({
      sales:{page:1,list:[]},
      price:{page:1,list:[]},
      comments_count:{page:1,list:[]}
    })
    let bscroll = reactive({})
    let isShowBackTop=ref(false)
    const showGoods=computed(()=>{
      return goods[currentOrder.value].list;
    })
    const init=()=>{
      getCategoryGoods('sales',currentCid.value).then(res=>{
        goods.sales.list=res.goods.data
      })
      getCategoryGoods('sales',currentCid.value).then(res=>{
        goods.price.list=res.goods.data
      })
      getCategoryGoods('sales',currentCid.value).then(res=>{
        goods.comments_count.list=res.goods.data
      })
    }
    onMounted(() => {
      getCategory().then(res => {
        categories.value = res.categories
      })
      getCategoryGoods('sales',currentCid.value).then(res=>{
        goods.sales.list=res.goods.data
      })
      bscroll = new BScroll(document.querySelector('.goods-list'), {
        probeType: 3, //0,1,2,3只要运行就会触发scroll事件
        click: true, //是否允许点击
        pullUpLoad: true //上拉加载更多，默认是false
      })
      //注册滚动事件
      bscroll.on('scroll',(position)=>{
        isShowBackTop.value=-position.y>300
      })
      bscroll.on('pullingUp', () => {
        const page=goods[currentOrder.value].page+1;
        getCategoryGoods(currentOrder.value,currentCid.value,page).then(res=>{
          goods[currentOrder.value].list.push(...res.goods.data)
          goods[currentOrder.value].page+=1
        })
        bscroll.finishPullUp()
        nextTick(() => {
          //重新计算高度
          bscroll && bscroll.refresh()
        })
      })

    })
    //监听任何一个变量有变化
    watchEffect(() => {
      nextTick(() => {
        //重新计算高度
        bscroll && bscroll.refresh()
      })
    })
    //排序选项卡
    const tabClick=(index)=>{
      let orders=['sales','price','comments_count']
      currentOrder.value=orders[index]
      getCategoryGoods(currentOrder.value,currentCid.value).then(res=>{
        goods[currentOrder.value].list=res.goods.data;
        nextTick(() => {
          //重新计算高度
          bscroll && bscroll.refresh()
        })
      })
    }
    //通过分类得到商品
    const getGoods=(cid)=>{
      currentCid.value=cid
      init()
      nextTick(() => {
        //重新计算高度
        bscroll && bscroll.refresh()
      })
    }
    const backTop=()=>{
      bscroll.scrollTo(0,0,500)
    }
    const itemClick=(id)=>{
      router.push({path:'/detail',query:{id}})
    }
    return {activeKey, categories, activeName,bscroll,isShowBackTop,itemClick,
      active,tabClick,currentOrder,currentCid,getGoods,showGoods,backTop}
  }

}
</script>

<style scoped lang="scss">
#box {
  padding: 45px 0 50px;
  display: flex;

  .order-tab {
    flex: 1;
    float: right;
    //background-color: #123;
    //width: 100%;
    height: 50px;
    z-index: 9;
    position: fixed;
    top: 45px;
    right: 0;
    left: 130px;

  }

  .left-menu {
    position: absolute;
    float: left;
    top: 45px;
    left: 0;
    //background-color: #321;
    width: 130px;
    overflow-y: scroll;
    //height: 200px;
  }

  .goods-list {
    flex: 1;
    //background-color: #213;
    //width: 100px;
    height: 100vh;
    position: absolute;
    top: 95px;
    left: 130px;
    right: 0;


  }
}
</style>
